<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Province</title>
</head>
<body>
<select id="province">
    <option value="-1">请选择</option>
</select>
<select id="city"></select>
<select id="country"></select>
<script type="text/javascript">
    var provinceArr = ['北京', '上海', '天津', '重庆'];
    var cityArr = [['北京市'], ['上海市'], ['天津市'], ['重庆市']];
    var countryArr = [
        [
            ['朝阳区', '海淀区', '房山区', '西城区', '大兴区']
        ], [
            ['黄埔区', '静安区', '长宁区', '浦东区']
        ], [
            ['北辰区', '红桥区', '武清区', '河西区']
        ], [
            ['外州区', '渝中区', '江北区', '渝北区']
        ]
    ];

    function createOption(obj, data) {
        for (var i in data) {
            var option = new Option(data[i], i);
            obj.options.add(option);
        }
    }

    var province = document.getElementById('province');
    createOption(province, provinceArr);

    var city = document.getElementById('city');
    province.onchange = function () {
        city.options.length = 0;
        createOption(city, cityArr[province.value]);
        country.onchange();
    };

    var country = document.getElementById('country');
    city.onchange = function () {
        country.options.length = 0;
        createOption(country, countryArr[province.value][city.value]);
    };
</script>
</body>
</html>